<script lang="ts">
import { RangeMonth } from '~/components-business/range';
import { CurrencySelect } from '~/components/currency';

export const inviteBonusPopup = useAntdModal(

  defineAsyncComponent(() => import('./InviteBonusPopup.vue')),
  {
    title: toRef(() => $t('e1QCiWLxXcGqes7Lj4Hqn')),
    wrapClassName: 'ant-cover__Modal-drawer __screen-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script lang="ts" setup>
const statusActions = computed(() => [
  { value: '', label: $t('xloaZjK9J6MoD2EybiBw') },
  { value: 2, label: $t('4YkajQkzE2zNJrYYuzYY') },
  { value: 3, label: $t('r7ivO81mOlU4yBfwfsd5Q') },
]);

function useTableList() {
  const [listQry, listParams] = useFilterPaginationQuery(apis.apiDepositCommissionRecord, {
    currency: { value: undefined, responsive: true },
    start_time: { value: dayjs().startOf('month').valueOf(), responsive: true },
    end_time: { value: dayjs().endOf('month').valueOf(), responsive: false },
    status: { value: undefined, responsive: true },
    page_size: { value: 5 },
  });
  const listData = computed(() => listQry.data.value?.list ?? []);
  const tableColumns = computed(() =>
    [{ key: 'time', name: '' }, { key: 'amount', name: $t('plHorg6dj8ZgRdr4b24gt'), thClass: 'text-right', tdClass: 'text-right' }]);

  return {
    listQry,
    listParams,
    listData,
    tableColumns,
  };
}
const { listQry, listParams, listData, tableColumns } = useTableList();
const displayUtc = ref(true);
const [setEle, eleBp] = useElementBreakpoint({});
</script>

<template>
  <div>
    <div class="grid grid-cols-[1fr_1fr] mb-3 gap-2">
      <CurrencySelect
        v-model:value="listParams.currency"
        class="antd-cover__Select-3d-gray"
        size="small" labelAlign="center" allowClear :bordered="false" :placeholder="$t('uIkputJyPtyBCeeSwh2ig')"
      />
      <!-- <ARangePicker
        v-bind="valueOfRangePickerProps(listParams)"
        class="ant-cover__RangePicker-3d-gray"
        inputReadOnly :bordered="false" format="MM-DD"
      /> -->
      <RangeMonth
        v-model:startTime="listParams.start_time"
        v-model:endTime="listParams.end_time" :bordered="false"
        size="small" :virtual="false" :class="{ 'w-40': eleBp['5xl'] }"
      />

      <ASelect
        v-model:value="listParams.status"
        class="antd-cover__Select-3d-gray text-center" :class="[$attrs.class]"
        :options="statusActions" :placeholder="$t('xloaZjK9J6MoD2EybiBw')"
        :bordered="false" size="small" :virtual="false"
      />
    </div>

    <TCard>
      <TSuspenseView v-bind="buildSvPropsOfQuery(listQry)" errorClass="min-h-60" outRender>
        <TTable indexId="uid" :columns="tableColumns" :data="listData">
          <template #time-th>
            <TDateFormatTh v-model:utc="displayUtc" />
          </template>
          <template #time-td="{ row }">
            <div class="flex items-center gap-2 text-3">
              <div
                class="relative h-9 w-9 flex items-center justify-center text-2"
                @click="globalPopups.userProfile?.open({ userId: row.from_user?.uid ?? '' });"
              >
                <TAvatar :avatarId="row.from_user?.avatar" :level="row.from_user?.level" class="w-7" />
              </div>
              <div>
                <p>{{ row.from_user?.nickname }}</p>
                <p class="flex items-center gap-1">
                  ID:{{ desensitize(row.from_user?.uid, 6) }}
                  <TCopy :source="row.from_user?.uid" :nthParent="1" class="py-2 pl-20 text-1.2em -my-2 -ml-20" />
                </p>
              </div>
            </div>
            <div class="text-sys-text-body">
              {{ $d(row.create_time, displayUtc ? 'full-utc' : 'full') }}
            </div>
          </template>
          <template #amount-td="{ row }">
            <div>
              <TAmount :value="row.amount" :symbol="row.currency" showPositiveSign class="text-3.5" iconSize="1.2em" />
            </div>
            <div
              class="ml-auto mt-1 w-fit border-(1px current solid) rounded-1 px-2.5 py-1 text-3"
              :class="row.status === 1 ? 'text-green-500' : 'text-sys-text-body'"
            >
              {{ statusActions?.filter(i => i.value === row.status)[0].label }}
            </div>
          </template>
        </TTable>
      </TSuspenseView>
    </TCard>

    <TPagination
      v-model:page="listParams.page"
      v-model:pageSize="listParams.page_size"
      class="mt-2"
      :querier="listQry"
    />
  </div>
</template>
